<template>
	<view class="strategy-two">
		<view class="strategy-header" @click="toStrategyDetail(info)">
			<view class="strategy-title">{{info.name}}</view>
			<view v-if="info.tag" class="strategy-tags">
				<view class="strategy-tag border" v-for="(item,index) in info.tag" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="strategy-body">
			<view class="strategy-chart">
				<!-- ======================================================== -->
				<trend-line chartId="echarts-linea" :xAxis="info.date" :series="info.series" :series1="info.series1" class="chart-line"/>
			</view>
			<view class="strategy-count" @click="toStrategyDetail(info)">
				<view class="info">
					<view class="info-num" :class="info.mark.accumulated_earnings>0?'red':'green'">{{info.mark.accumulated_earnings}}%</view>
					<view class="info-name">累计收益</view>
				</view>
				<view class="info">
					<view class="info-num" :class="info.mark.year_earings>0?'red':'green'">{{info.mark.year_earings}}%</view>
					<view class="info-name">年化收益</view>
				</view>
				<view class="info">
					<view class="info-num" :class="info.mark.earnings>0?'red':'green'">{{info.mark.earnings==0?'0.00':(info.mark.earnings*100).toFixed(2)}}%</view>
					<view class="info-name">今日收益</view>
				</view>
				<view class="info">
					<view class="info-num">{{info.cacudata.maxCanc}}</view>
					<view class="info-name">最大回撒</view>
				</view>
			</view>
		</view>
		<view class="strategy-footer">
			<view class="footer-left">
				<view class="price-box" @click="toStrategyDetail(info)">
					<view v-if="userInfo.review_status == 1" class="strategy-price d-f a-i-b">
						<view class="saleprice_cont" v-if="length!=0">
							<view class="sale-price" v-if="info.price==0">限时免费</view>
							<view class="sale-price" v-else>{{pay_type==1?'￥'+price/100+' /月起':price/100+'积分'}}</view>
							<view class="origin-rice t-d-l" v-if="pay_type==1">￥{{original_price/100}}/月</view>
						</view>
						<view class="sale-price" v-else>
							暂不支持订阅
						</view>
					</view>
					<view v-else class="sale-price">
						暂不支持订阅
						<!-- <view class="hide-box">xxx /月起</view> -->
					</view>
				</view>
				<!-- <view v-if="userInfo.review_status == 1" class="button-box">
					<view class="button" :class="info.left_stock==0?'ray':''" v-if="info.price!=0" @click="toStrategyPayPage(info)">{{info.left_stock==0?'订阅已满':'立即订阅'}}</view>
					<view class="button" v-else @click="freeStrategy(info)">免费订阅</view>
				</view> -->
				
			</view>
			<view class="footer-right">
				<!-- <view v-if="userInfo.review_status == 1" class="button-box">
					<view class="button" :class="info.left_stock==0?'ray':''" v-if="info.price!=0" @click="toStrategyPayPage(info)">{{info.left_stock==0?'订阅已满':'立即订阅'}}</view>
					<view class="button" v-else @click="freeStrategy(info)">免费订阅</view>
				</view>  v-else-->
				
				<view class="button-box" @click="toStrategyDetailPage(info)">
					<view class="button">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {MEMBER_INFO} from '@/config/storage.js'
	import TrendLine from '@/components/echarts/trend-line/index.vue'
	import {toStrategyDetailPage, toUserRealNamePage, toStrategyPayPage} from '@/utils/PageRouter.js'
	import {createOrder} from '@/api/trade.js'

	export default {
		components: {TrendLine},
		props: {
			info: {
				type: Object,
				default: function () {
					return {}
				}
			},
			userInfo: {
				type: Object,
				default: function () {
					return {}
				}
			},
		
		},
		data(){
			return{
				length:0,
				pay_type:0,
				price:0,
				original_price:0
			}
		},
		onShow() {},
		mounted() {
			this.length=this.info.priceList.length
			for(let i=0;i<this.length;i++){
				if(this.info.priceList[i].pay_type==0){
					this.pay_type=0
					this.price=this.info.priceList[i].price
				}else{
					this.pay_type=1
					this.price=this.info.priceList[i].price
					this.original_price=this.info.priceList[i].original_price
				}
			}
		},
		methods: {
			freeStrategy(item){
				createOrder({pay_type: item.type,strategy_id: item.id,strategy_price_id: item.price,discount_card_id:''}).then(res=>{
					if(res.code==200){
						uni.showToast({
						    title: '订阅成功',
						    duration: 2000
						});
					}else{
						uni.showToast({
						    title: res.msg,
						    duration: 2000
						});
					}
				})
			},
			toStrategyDetailPage (item) {
				toStrategyDetailPage(item.id)
			},
			toStrategyPayPage(item) {
				if(item.left_stock==0){
					uni.showToast({
						title:"订阅量已满，请联系客服",
						icon:'none'
					})
				}else{
					toStrategyPayPage(item.id)
				}
			},
			//	查看详情
			toStrategyDetail(item) {
				// const {userInfo} = this
				// if (userInfo.review_status == 1) {
					toStrategyDetailPage(item.id)
				// } else {
				// 	uni.showModal({
				// 	    title: '提示',
				// 	    content: '您还未实名认证，请先实名认证',
				// 	    success: function (res) {
				// 	        if (res.confirm) {
				// 	            // 用户点击确定
				// 				toUserRealNamePage()
				// 	        } else if (res.cancel) {
				// 	            // 用户点击取消
				// 	        }
				// 	    }
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nosize{
		font-size: 18px;
	}
	.strategy-two{
		.strategy-header{
			display: flex;
			align-items: center;
			.strategy-title{
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
			.strategy-tags{
				display: flex;
				align-items: center;
			}
			.strategy-tag{
				color: #4a90e2;
				width: fit-content;
				padding: 10rpx;
				display: flex;
				font-size: 24rpx;
				line-height: 1;
				margin-right: 10rpx;
				&:last-child{margin-right: 0;}
				&:after{border-color: #c2d9f5;}
			}
		}
		.strategy-body{
			.strategy-chart{
				width: 100%;
				height: 400rpx;
				background-color: #fff;
				.chart-line {
					width: 100%;
					height: 400rpx;
					position: relative;
					background-color: #fff;
				}
			}
			.strategy-count{
				padding: 20rpx 0;
				display: flex;
				.info{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// &:nth-child(1){color: #eb333b;}
					// &:nth-child(2){color: #eb333b;}
					// &:nth-child(3){color: #2daf4a;}
					.info-num{
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					.info-name{
						color: #999;
						// font-size: 24rpx;
					}
				}
			}
		}
		.red{color: #eb333b;}
		.green{color:#2daf4a;}
		.strategy-footer{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			.footer-left{
				height: 100%;
				display: flex;
				align-items: center;
				.saleprice_cont{
					height: 100%;
					display: flex;
					align-items: center;
					.sale-price{
					color: #e41e2a;
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 10rpx;
					
					}
				}
				.sale-price{
				color: #e41e2a;
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 10rpx;
				
				}
				.origin-rice{
					color: #999;
					font-size: 24rpx;
				}
				.hide-box{
					color: #e41e2a;
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
			
			.button-box{
				.button{
					color: #fff;
					width: 240rpx;
					height: 80rpx;
					font-weight: bold;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $theme_color;
				}
				.ray{
					background-color:#d0d0d0;
				}
			}
		}
	}
</style>
